<script setup lang="ts">
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { countUserNum } from "@/api";
import {ElMessage} from "element-plus"
const data = ref([])
let colors = ["red", "red", "#F48C02", "#F4023C"];
const option = ref({});
const getData = () => {
  countUserNum().then((res) => {
    if (res.success) {
      data.value = res.data.map(item =>{
        item.name = item.name + item.value + '单'
        return item
      })
      setOption();
    }else{
      ElMessage.error(res.msg)
    }
  }).catch(err=>{
    ElMessage.error(err)
  });
};
getData();
const setOption = () => {
  option.value = {
    color: ["#58b1ff", "#70e17b", "#52daf2", "#a1d1ff", "#a7f1ff", "#b5f6bb"],
    // grid: {
    //     left: 0,
    //     top: 0,
    //     bottom: 0,
    //     right: 80,
    //     // containLabel: true
    // },
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    legend: {
        type: "scroll",
        orient: "vartical",
        top: "center",
        right: 0,
        itemWidth: 16,
        itemHeight: 8,
        itemGap: 16,
        textStyle: {
            color: 'white',
            fontSize: 12,
            fontWeight: 0
        },
    },
    series: [{
        type: 'pie',
        radius: ['20%', '80%'],
        left: -100,
        roseType: 'area',
        label: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false
            }
        },
        data: data
    }, ]
};
};
</script>

<template>
  <v-chart class="chart" :option="option" />
</template>

<style scoped lang="scss"></style>
